<!DOCTYPE html>
<html lang="en">
<head>
    <header th:replace="layout/admin/head :: head"></header>
    <!-- Custom styles for this template -->
    <link th:href="@{/css/admin/admin_index.css}" rel="stylesheet"/>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Help</a></li>
            </ul>
            <!--      <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="Search...">
                  </form>-->
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div id="slidebar" class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Analytics</a></li>
                <li><a href="#">Export</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">Dashboard</h1>

            <div class="row placeholders">
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img src=""
                         width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"/>
                    <h4>访问量</h4>
                    <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img src=""
                         width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"/>
                    <h4>会员数</h4>
                    <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img src=""
                         width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"/>
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                    <img src=""
                         width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail"/>
                    <h4>Label</h4>
                    <span class="text-muted">Something else</span>
                </div>
            </div>

            <h2 class="sub-header">文档管理（暂无）</h2>


            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <label style="font-weight: normal;">作者：</label>
                        <select tabindex="-1" id="orderSource" name="orderSource"
                                class="input-medium select2-offscreen">
                            <option value="">全部</option>
                        </select>
                    </div>
                    <div class="col-md-3"><input id="btnSubmit" class="btn btn-primary" type="button" value="查询"/></div>
                    <div class="col-md-3"><input id="btnCreate" class="btn btn-primary" type="button" value="新增"/></div>
                </div>
                <div id="artilce_table" class="row">
                    <div class="col-md-12">
                        <table id="grid"></table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div id="pager2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        pageInit();
    });
    function pageInit() {
        jQuery("#grid").jqGrid({
            url: 'http://localhost:8010/articles',
            datatype: "json",
            colNames: ['ID', '标题', '作者', '标签', '分类', '内容', '创建时间', '最后修改时间'],
            colModel: [{name: 'id', index: 'id', width: 20},
                {name: 'title', index: 'title', width: 90, sortable: false},
                {name: 'author', index: 'author', width: 100},
                {name: 'tag', index: 'tag', width: 80, align: "right", sortable: false},
                {name: 'category', index: 'category', width: 80, align: "right", sortable: false},
                {name: 'content', index: 'content', width: 80, align: "right", sortable: false},
                {name: 'createTime', index: 'createTime', width: 150},
                {name: 'lastmodifyTime', index: 'lastmodifyTime', width: 150}

            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager2',
            sortname: 'id',
            mtype: "GET",
            viewrecords: true,
            sortorder: "desc",
            emptyrecords: "暂无数据",
            autowidth: true,
            caption: "文章列表概览",
            loadonce: false,        //如果为ture则数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用
            loadComplete: function () {
            },
            prmNames: {
                page: "pageIndex", // 表示请求页码的参数名称
                rows: "pageSize", // 表示请求行数的参数名称
                totalrows: "count"//表示一共有多少条数据
                //sort: "sortFieldName", // 表示用于排序的列名的参数名称
                //order: "sort" // 表示采用的排序方式的参数名称
            },
            jsonReader: {
                root: "data", // json中代表实际模型数据的入口
                page: "pageIndex", // json中代表当前页码的数据
                total: "totalPage", // json中代表页码总数的数据
                records: "count", // json中代表数据行总数的数据
                subgrid: {root: "data"}
            }
        });
        doResize();
    }

    /*
     查询
     */
    $("#btnSubmit").on("click", function () {

        $("#grid").jqGrid('setGridParam', {
            postData: $("#searchForm").serializeJSON(),
            page: 1
        }).trigger("reloadGrid");
    });

    /*新增*/
    //        $("#btnCreate").onclick(function () {
    //
    //        })

    $(window).resize(function () {
        var sliderBarWidth=$("#slidebar").width;
        $("#grid").jqGrid('setGridWidth', $(window).width() - sliderBarWidth-8);
        var tableHeight = $("#artilce_table").height();
        $("#grid").jqGrid('setGridHeight', tableHeight-30);
    }).resize();

    function doResize() {
        var sliderBarWidth=$("#slidebar").width;
        $("#grid").jqGrid('setGridWidth', $(window).width() - sliderBarWidth-8);
        var tableHeight = $("#artilce_table").height();
        $("#grid").jqGrid('setGridHeight', tableHeight-30);
    }


</script>

</body>
</html>
